<!-- 頂部 -->
<template>
  <div class="header">
    <wxc-minibar background-color="#fcfcfc" :use-default-return=false :title="this.title">
      <div class="action" slot="left">
        <i class="iconfont icon-mine" @click="jumpToPage('/mine')"></i>
        <div class="language-box">
          <i :class="icon" @click="handleLanguage()"></i>
          <div v-if="overlay.show" class="language-list">
            <list>
              <cell v-for="(value,index) in lists" :key="index">
                <text :class="{ selected: languageId == value.lang_id }" @click="changeLanguage(value.lang_id, value.icon, value.language, index)">{{value.title}}</text>
              </cell>
            </list>
          </div>
        </div>
      </div>
      <div class="action" slot="right">
        <i class="iconfont icon-order" @click="jumpToPage('/mine-order')"></i>
        <div class="shopping-cart" @click="jumpToPage('/shopping-cart')">
          <i class="iconfont icon-shopping-car"></i>
          <wxc-tag class="shopping-cart-num-tag"
            v-if="shoppingCartNumber > 0"
            type="solid"
            tag-color="#f75550"
            font-color="#ffffff"
            :value="shoppingCartNumber"></wxc-tag>
        </div>
      </div>
    </wxc-minibar>
    <wxc-overlay
      :show="overlay.show"
      :top="overlay.top"
      opacity="0.6"
      @wxcOverlayBodyClicking="wxcOverlayBodyClicking"
      ></wxc-overlay>
  </div>
</template>

<style lang="scss">
.header {
  .shopping-cart {
    display: inline-flex;
    position: relative;

    .shopping-cart-num-tag {
      width: fit-content;
      position: absolute;
      right: -10px;
      top: -10px;

      .tag-item {
        border-radius: 50%;
        width: 35px;
        height: 35px;

        .tag-text {
          padding: 0;
          line-height: 24px;
          font-size: 24px;
          margin-right: 2px;
        }
      }
    }
  }

  .wxc-overlay {
    z-index: 99;
  }
}
</style>

<style lang="scss" scoped>
  .header {
    .action {
      display: inline-block;

      i {
        font-size: 0.48rem;
        padding: 0 10px;

        &:first-child {
          padding-left: 0;
        }

        &:last-child {
          padding-right: 0;
        }
      }

      .language-box {
        display: inline-block;
        position: relative;

        .language-list {
          top: 65px;
          position: absolute;
          z-index: 100;
          width: max-content;
          min-width: 156px;
          background-color: #000000;
          padding: 0 20px 20px 20px;
          border-radius: 20px;
          left: -75%;

          &:before {
            content: "";
            display: inline-block;
            position: absolute;
            top: -14px;
            left: 30%;
            width: 0;
            height: 0;
            border-left: 7px solid transparent;
            border-right: 7px solid transparent;
            border-bottom: 14px solid #000000;
          }

          .weex-text {
            color: #ffffff;
            font-size: 24px;
            margin-top: 20px;

            &.selected {
              color: #f45551;
            }
          }
        }
      }
    }
  }
</style>

<script>
import { WxcMinibar, WxcTag, WxcOverlay } from 'weex-ui'
import { i18n } from '@/renderer/modules/lang'
export default {
  name: 'header',
  components: {
    WxcMinibar,
    WxcTag,
    WxcOverlay
  },
  props: {
    title: {
      type: String,
      required: true
    },
    shoppingCartNumber: {
      type: Number
    }
  },
  watch: {
    shoppingCartNumber (newShoppingCartNumber, oldShoppingCartNumber) {
      this.shoppingCartNumber = newShoppingCartNumber
    }
  },
  data: () => ({
    languageId: localStorage.getItem('language'),
    headerMessage: 'Header',
    lists: [
      {
        icon: 'iconfont icon-language-zh-cn',
        title: '简体中文',
        lang_id: 2,
        language: 'zh_CN'
      },
      {
        title: '繁体中文',
        icon: 'iconfont icon-language-zh-tw',
        lang_id: 1,
        language: 'zh_ZH'
      },
      {
        icon: 'iconfont icon-language-en',
        title: 'English',
        lang_id: 3,
        language: 'en_US'
      }
    ],
    icon: 'iconfont icon-language-zh-tw',
    overlay: {
      show: false,
      top: 90
    },
  }),
  created () {
    let itme = localStorage.getItem('itme')
    this.icon = itme ? this.lists[itme].icon : 'iconfont icon-language-zh-tw'
    i18n.locale = itme ? this.lists[itme].language : 'zh_CN'
  },
  methods: {
    jumpToPage (src) {
      console.log(src);
      this.$router.push(src)
    },
    handleLanguage () {
      this.languageId = localStorage.getItem('language')
      this.overlay.show = true
    },
    wxcOverlayBodyClicking () {
      this.overlay.show = false
    },
    changeLanguage (value, icon, language, itme) {
      i18n.locale = language
      localStorage.setItem('language', value)
      localStorage.setItem('itme', itme)
      let subscript = this.lists[itme].icon
      this.icon = subscript
      this.languageId = value
      this.wxcOverlayBodyClicking()
      location.reload()
    }
  }
}
</script>
